<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <style>
        #app{
            margin: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="tabHeads" class="app-container">

        <el-steps :active="active" finish-status="success">
            <el-step title="输入用户名和邮箱"></el-step>
            <el-step title="提交验证密保信息"></el-step>
            <el-step title="修改密码并且提交"></el-step>
        </el-steps>


        <el-form ref="dataForm"  label-position="left" label-width="100px" style="width: 400px; margin-left: 50px ;margin-top: 50px;">

            <div v-show="active == 1">
                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                    <el-form-item prop="adminName" label="用户名">
                        <el-input v-model="dynamicValidateForm.adminName"></el-input>
                    </el-form-item>
                    <el-form-item
                            prop="adminMail"
                            label="邮箱"
                            :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
                        <el-input v-model="dynamicValidateForm.adminMail"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="findAdmin()">提交</el-button>
                        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div v-show="active == 2">
                <el-form :model="queueForm" ref="queueForm" label-width="100px" class="demo-dynamic">
                    <el-form-item prop="adminName" label="喜欢的明星">
                        <el-input v-model="queueForm.adminQuestion1"></el-input>
                    </el-form-item>
                    <el-form-item prop="adminName" label="喜欢的电影">
                        <el-input v-model="queueForm.adminQuestion2"></el-input>
                    </el-form-item>
                    <el-form-item prop="adminName" label="喜欢的菜">
                        <el-input v-model="queueForm.adminQuestion3"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="testAndVerify()">提交</el-button>
                        <el-button @click="resetForm('queueForm')">重置</el-button>
                        <el-button v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div v-show="active == 3">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </el-form>

    </div>

</div>

</body>
</html>
<script>
    new Vue({
        el:"#app",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                active: 1,
                dynamicValidateForm:{
                    adminName:'',
                    adminMail:'',
                },
                queueForm:{
                    adminQuestion1:'',
                    adminQuestion2:'',
                    adminQuestion3:'',
                },
                ruleForm: {
                    pass: '',
                    checkPass: '',
                },
                rules: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],

                }
            };
        },
        methods: {

            // 步骤条下一步的方法
            next() {
                if (this.active++ > 3) this.active = 1
            },
            // 步骤条上一步的方法
            pre() {
                if (this.active-- < 1) this.active = 1
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var _this = this;
                        var params = new URLSearchParams()
                        params.append("adminPassword",this.ruleForm.pass);
                        axios({
                            url:"updateAdminPasswordById",
                            method:"post",
                            data:params
                        }).then(function (response) {
                            if(response.data=="1"){
                                window.location.href="loginPage"
                            }else{
                                window.location.href="toErrorPage"
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            findAdmin() {
                var _this = this;
                var params = new URLSearchParams()
                params.append("adminName",this.dynamicValidateForm.adminName);
                params.append("adminMail",this.dynamicValidateForm.adminMail);
                axios({
                    url:"findAdminByNameAndMail",
                    method:"post",
                    data:params
                }).then(function (response) {
                    if(response.data=="1"){
                        _this.active = 2;
                    }else{
                        alert("用户名或邮箱错误")
                    }
                })
            },
            testAndVerify(){
                var _this = this;
                var params = new URLSearchParams()
                params.append("adminQuestion1",this.queueForm.adminQuestion1);
                params.append("adminQuestion2",this.queueForm.adminQuestion2);
                params.append("adminQuestion3",this.queueForm.adminQuestion3);
                params.append("adminName",this.dynamicValidateForm.adminName);
                params.append("adminMail",this.dynamicValidateForm.adminMail);
                axios({
                    url:"testAndVerify",
                    method:"post",
                    data:params
                }).then(function (response) {
                    if(response.data=="1"){
                        _this.active = 3;
                    }else{
                        alert("密保问题回答错误")
                    }
                })
            },

        }
    });
</script>